.home {
  @green: #297a0d;

  .header {
    .func_height_vw(@base-width, 380);

    @gap-right: (70 / @base-width) * 100vw;
    @gap-top: (50 / @base-width) * 100vw;

    padding: @gap-top @gap-right 0;
    background: @index-bg no-repeat 50% 50% / cover;
    .logo {
      width: percentage(230 / @base-width);
    }
    .info {
      position: absolute;
      top: @gap-top;
      right: @gap-right;
      .rem(50);
      color: #fff;
    }

    .search {
      position: relative;
      margin-top: 1rem;
      padding-left: 3em;
      .rem(40);

      background: rgba(#fff, 0.7);
      border: 1px solid rgba(@green, 0.7);
      border-radius: 0.5em;

      &::before{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 1em;
        margin: auto;
        .ico(56,60,@search,0);
        background: @green;
      }

      input {
        height: 3em;
        border: 0;
        background: none;

        &::placeholder {
          color: @green;
        }
      }
    }
  }

  .main {
    padding: 1em 0.5rem;
  }

  .mod {
    .tit {
      .rem(58);
      padding-left: 0.3em;
      margin: 0.8em 0 0.6em;
    }

    .totals {
      color: @red;
    }
  }

  .list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    li {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      text-align: center;

      .func_width_vw(576);
      margin-bottom: .5rem;
      padding: 0.5em;
      .rem(46);


      background: #eee;
      box-sizing: border-box;
    }

    figure {
      flex-shrink: 0;
      overflow: hidden;
      .func_width_vw(265);
      .func_height_vw(265, 236);
      margin-right: 0.5em;
      border: (15em / 46) solid #fff;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .info{
      flex: 1;
    }
  }
}
